<template>
  <view class="teacher-info">
    <view class="info-cards">
      <view v-for="(chapter, index) in list" :key="index" 
        class="info-card">
        <view class="card-header">
          <view class="course-info">
            <text class="course-name">{{ chapter.title }}</text>
            <text class="chapter-count" v-if="chapter.chapterItems.length">
              {{ chapter.chapterItems.length }}个培训项目
            </text>
          </view>
        </view>

        <view class="card-content">
          <!-- 培训项目列表 -->
          <view class="section-title">培训项目</view>
          <view class="project-list">
            <view class="project-item" v-for="(item, idx) in chapter.chapterItems" :key="idx">
              <text class="item-name">{{ item.title }}</text>
            </view>
          </view>

          <!-- 培训时间列表 -->
          <view class="section-title">培训安排</view>
          <view class="schedule-list">
            <view class="schedule-item" v-for="(date, dateIdx) in chapter.dates" :key="dateIdx">
              <view class="date-header">
                <text class="date">{{ parseTime(date.monthDate, '{y}-{m}-{d}') }}</text>
              </view>
              <view class="time-slots">
                <view class="time-slot" v-for="(time, timeIdx) in date.times" :key="timeIdx">
                  <view class="time-info">
                    <text class="time">{{ parseTime(time.startTime, '{h}:{i}') }} - {{ parseTime(time.endTime, '{h}:{i}') }}</text>
                    <text class="room">教室：{{ time.room }}</text>
                  </view>
                  <view class="teacher-info">
                    <text class="teacher-label">授课教师:</text>
                    <view class="teacher-list">
                      <view class="teacher-item" v-for="(teacher, tIdx) in time.teachers" :key="tIdx">
                        <image class="teacher-avatar" :src="teacher.avatar || 'https://img.qiananquang.com/minapp/avatar.png'" mode="aspectFill"></image>
                        <text class="teacher-name">{{ teacher.name }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="card-footer">
          <view class="footer-left">
            <text class="student-total">
              <text class="iconfont icon-yonghu"></text>
              培训学员：<text class="num">{{ data.studentTotal || 0 }}人</text>
            </text>
          </view>
          <view class="footer-right">
            <button class="btn-students" @click="navigateToStudents(chapter.id)">
              <text class="iconfont icon-mingdan"></text>
              学员名单
            </button>
            <button class="btn-view" @click="listClick(chapter)">
              <text class="iconfont icon-detail"></text>
              查看详情
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-state" v-if="list.length === 0">
      <image src="/static/img/empty.png" mode="aspectFit"></image>
      <text>暂无培训信息</text>
    </view>
  </view>
</template>

<script>
import { getTeamDetail } from '@/http/teacher.js'
import { parseTime } from '@/utils/tools.js'
export default {

  components: {},
  data() {
    return {
      parseTime,
      teamList: [],
      data:{},
      id: '',
      list:[],
      childList:[]
    }
  },

  computed: {},
  methods: {
    getTeamList() {
      getTeamDetail({ teamId: this.id }).then(res => {
        this.data = res.data
        this.list = res.data.course.chapters
        this.childList = res.data.course.chapters[0].chapterItems
      })
    },
    listClick(item) {
      this.childList = item.chapterItems
      console.log(item)
    },
    navigateToStudents(teamId) {
      uni.navigateTo({
        url: `/pages/teacher/studentList?teamId=${teamId}`
      })
    },
    navigateToManage(teamId) {
      uni.navigateTo({
        url: `/pages/teacher/manage?teamId=${teamId}`
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.id = options.id
    this.getTeamList()
  },
  // 页面周期函数--监听页面初次���染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style lang="scss" scoped>
.teacher-info {
  background: #F7F6F9;
  padding: 30rpx;
}

.info-cards {
  .info-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .card-header {
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .course-info {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        flex: 1;
        
        .course-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-right: 20rpx;
        }
        
        .chapter-count {
          font-size: 24rpx;
          color: #FD3523;
          padding: 4rpx 12rpx;
          background: rgba(253,53,35,0.1);
          border-radius: 6rpx;
        }
      }
    }
    
    .card-content {
      .section-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin: 30rpx 0 20rpx;
        padding-left: 16rpx;
        border-left: 6rpx solid #FD3523;
      }
      
      .project-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .project-item {
          background: #F8F8F8;
          padding: 16rpx 24rpx;
          border-radius: 8rpx;
          
          .item-name {
            font-size: 26rpx;
            color: #333;
          }
        }
      }
      
      .schedule-list {
        .schedule-item {
          margin-bottom: 30rpx;
          
          .date-header {
            margin-bottom: 16rpx;
            
            .date {
              font-size: 28rpx;
              color: #333;
              font-weight: bold;
            }
          }
          
          .time-slots {
            .time-slot {
              background: #F8F8F8;
              border-radius: 12rpx;
              padding: 20rpx;
              margin-bottom: 16rpx;
              transition: all 0.3s;
              
              &:hover {
                transform: translateY(-2rpx);
                box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
              }
              
              .time-info {
                display: flex;
                justify-content: space-between;
                margin-bottom: 12rpx;
                
                .time {
                  font-size: 26rpx;
                  color: #333;
                }
                
                .room {
                  font-size: 26rpx;
                  color: #666;
                }
              }
              
              .teacher-info {
                display: flex;
                align-items: center;
                
                .teacher-label {
                  font-size: 26rpx;
                  color: #666;
                  margin-right: 16rpx;
                }
                
                .teacher-list {
                  display: flex;
                  gap: 20rpx;
                  flex-wrap: wrap;
                  
                  .teacher-item {
                    display: flex;
                    align-items: center;
                    background: #fff;
                    padding: 8rpx 16rpx;
                    border-radius: 30rpx;
                    
                    .teacher-avatar {
                      width: 40rpx;
                      height: 40rpx;
                      border-radius: 50%;
                      margin-right: 8rpx;
                    }
                    
                    .teacher-name {
                      font-size: 26rpx;
                      color: #333;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
    .card-footer {
      margin-top: 30rpx;
      padding-top: 20rpx;
      border-top: 2rpx solid #F5F5F5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .footer-left {
        .student-total {
          font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
          
          .iconfont {
            font-size: 28rpx;
            margin-right: 8rpx;
            color: #FD3523;
          }
          
          .num {
            color: #FD3523;
            font-weight: bold;
          }
        }
      }
      
      .footer-right {
        display: flex;
        gap: 16rpx;
        
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 24rpx;
          height: 64rpx;
          border-radius: 32rpx;
          font-size: 26rpx;
          border: none;
          
          .iconfont {
            margin-right: 8rpx;
            font-size: 28rpx;
          }
        }
        
        .btn-students {
          background: #FFF0EF;
          color: #FD3523;
          
          .iconfont {
            color: #FD3523;
          }
        }
        
        .btn-view {
          background: #F5F5F5;
          color: #666;
          
          .iconfont {
            color: #666;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
